<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { reactive, watch, computed, ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/module/home'
import router from '@/router'
const homeStore = useHomeStore() // 创建store实例
const { homeTableCoreDealers } = storeToRefs(homeStore)

const tableDataRight = reactive([
  homeTableCoreDealers.value.info?.slice(1, 2)[0],
]) as Array<any>

// 跳转到经销商详情
const clickDealer = (row) => {
  router.push({
    path: '/dealer-data',
    query: {
      uid: encodeURIComponent(row.distributor_id_encryption),
    },
  })
}
onMounted(() => {
  clickDealer
})
</script>
<template>
  <div class="table-box" v-if="tableDataRight.length">
    <ul>
      <li
        v-for="(item, index) in tableDataRight"
        :key="item.distributor_name"
        @click="clickDealer(item)"
      >
        <div>
          <p class="color-Td">
            {{ item.distributor_id_desc }}
          </p>
          <p>
            {{ item.nation_id }}
          </p>
          <p class="color-Td">
            {{ item.xj_desc }}
          </p>
          <p>
            {{ item.xj_rx_desc }}
          </p>
          <p class="color-Td">
            {{ item.distributor_name_desc }}
          </p>
        </div>

        <div>
          <p class="color-Td">
            {{ item.distributor_id }}
          </p>
          <p>
            {{ item.nation_id_desc }}
          </p>
          <p class="color-Td">
            {{ item.xj }}
          </p>
          <p>
            {{ item.xj_rx }}
          </p>
          <p class="color-Td">
            {{ item.distributor_name }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.table-box {
  width: 100%;
  height: calc(
    260px - 45px
  ); // 45px 是标题 35 高度+10px 轮播图指示器预留空间高度

  ul {
    width: 100%;
    height: 100%;
    color: white;
    font-size: 12px;
    li {
      display: flex;
      width: 100%;
      div {
        width: 50%;
        p {
          text-align: center;
          height: 30px;
          line-height: 30px;
          padding: 5px;
        }
      }
    }
    .color-Td {
      background-color: rgba(69, 65, 240, 0.1);
    }
  }
}
</style>
